<template>
	<view class="container">
		<!-- 导航栏 -->
		<!-- 顶部搜索栏 -->
		<view class="search-header">
			<view class="search-box">
				<u-icon name="arrow-left" size="22" color="#303133" @click="goBack"></u-icon>
				<view class="search-input-wrapper">
					<u-input placeholder="搜索交易记录" v-model="searchValue" border="none"
						placeholderStyle="color: #999" @change="onSearchChange" @confirm="onSearch" clearable
						:customStyle="{
							backgroundColor: '#fff',
							borderRadius: '20px',
							height: '36px',
							fontSize: '14px',
							padding: '0 10px'
						}" suffixIcon="search" suffixIconStyle="color: #999"></u-input>
				</view>
				<text class="search-text" @click="onSearch">搜索</text>
			</view>
		</view>

		<!-- 分类标签 -->
		<view class="category-tabs">
			<view class="tab-item" :class="{ 'active': activeTab === 'all' }" @click="switchTab('all')">
				<text class="tab-text">全部</text>
			</view>
			<view class="tab-item" :class="{ 'active': activeTab === 'expense' }" @click="switchTab('expense')">
				<text class="tab-text">支出</text>
			</view>
			<view class="tab-item" :class="{ 'active': activeTab === 'income' }" @click="switchTab('income')">
				<text class="tab-text">收入</text>
			</view>
			<view class="tab-item" :class="{ 'active': activeTab === 'order' }" @click="switchTab('order')">
				<text class="tab-text">订单</text>
			</view>
			<view class="tab-item" :class="{ 'active': activeTab === 'withdraw' }" @click="switchTab('withdraw')">
				<text class="tab-text">提款</text>
			</view>
		</view>

		<view class="container-box">
			<view class="account-box">
				<!-- 月度统计 -->
				<view class="monthly-summary">
					<view class="month-title">
						<text class="month-number">7</text>
						<text class="month-text">月</text>
					</view>
					<view class="summary-data">
						<view class="summary-item">
							<text class="summary-label">支出</text>
							<view class="summary-amount">
								<text class="summary-amount-text">¥</text>0.00
							</view>
						</view>
						<view class="summary-item">
							<text class="summary-label">收入</text>
							<view class="summary-amount">
								<text class="summary-amount-text">¥</text>0.00
							</view>
						</view>
					</view>
					<view class="budget-setting" @click="setBudget">
						<text class="budget-text">设置支出预算 ></text>
					</view>
				</view>

				<!-- 交易记录列表 -->
				<view class="transaction-list">
					<view class="transaction-item" v-for="(item, index) in filteredTransactions" :key="index">
						<view class="transaction-left">
							<view class="transaction-icon">
								<text class="icon-text">🚴</text>
							</view>
							<view class="transaction-info">
								<text class="transaction-title">{{ item.title }}</text>
								<text class="transaction-category">{{ item.category }}</text>
								<text class="transaction-time">{{ item.time }}</text>
							</view>
						</view>
						<view class="transaction-right">
							<text class="transaction-amount">{{ item.amount }}</text>
							<text class="transaction-status">{{ item.status }}</text>
						</view>
					</view>
				</view>

				<!-- 加载更多 -->
				<view class="load-more" v-if="hasMoreData">
					<text class="load-text">加载更多</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			searchKeyword: '',
			activeTab: 'all',
			hasMoreData: true,
			transactions: [
				{
					id: 1,
					title: '哈啰单车卡抵扣骑行费用',
					category: '交通出行',
					time: '今天 08:48',
					amount: '-0.00',
					status: '自动扣款成功',
					type: 'expense'
				},
				{
					id: 2,
					title: '哈啰单车卡抵扣骑行费用',
					category: '交通出行',
					time: '今天 08:48',
					amount: '-0.00',
					status: '自动扣款成功',
					type: 'expense'
				},
				{
					id: 3,
					title: '哈啰单车卡抵扣骑行费用',
					category: '交通出行',
					time: '今天 08:48',
					amount: '-0.00',
					status: '自动扣款成功',
					type: 'expense'
				},
				{
					id: 4,
					title: '哈啰单车卡抵扣骑行费用',
					category: '交通出行',
					time: '今天 08:48',
					amount: '-0.00',
					status: '自动扣款成功',
					type: 'expense'
				},
				{
					id: 5,
					title: '哈啰单车卡抵扣骑行费用',
					category: '交通出行',
					time: '今天 08:48',
					amount: '-0.00',
					status: '自动扣款成功',
					type: 'expense'
				},
				{
					id: 6,
					title: '哈啰单车卡抵扣骑行费用',
					category: '交通出行',
					time: '今天 08:48',
					amount: '-0.00',
					status: '自动扣款成功',
					type: 'expense'
				},
				{
					id: 7,
					title: '哈啰单车卡抵扣骑行费用',
					category: '交通出行',
					time: '今天 08:48',
					amount: '-0.00',
					status: '自动扣款成功',
					type: 'expense'
				}
			]
		};
	},
	computed: {
		filteredTransactions() {
			let filtered = this.transactions;

			// 根据选中的分类过滤
			if (this.activeTab !== 'all') {
				filtered = filtered.filter(item => item.type === this.activeTab);
			}

			// 根据搜索关键词过滤
			if (this.searchKeyword) {
				filtered = filtered.filter(item =>
					item.title.includes(this.searchKeyword) ||
					item.category.includes(this.searchKeyword)
				);
			}

			return filtered;
		}
	},
	methods: {
		// 返回
		goBack() {
			uni.navigateBack();
		},

		// 切换标签
		switchTab(tab) {
			this.activeTab = tab;
		},

		// 设置预算
		setBudget() {
			uni.showModal({
				title: '设置月度预算',
				editable: true,
				placeholderText: '请输入预算金额',
				success: (res) => {
					if (res.confirm && res.content) {
						this.$api.msg(`预算设置为 ¥${res.content}`);
					}
				}
			});
		},

		// 搜索
		onSearch() {
			// 搜索逻辑已在computed中处理
			console.log('搜索:', this.searchKeyword);
		},

		// 加载更多
		loadMore() {
			this.$api.msg('加载更多数据');
			// 这里可以调用API获取更多数据
		}
	}
}
</script>

<style lang="scss">
page {
	background: #f5f5f5;
}

.container {
	min-height: 100vh;
	background: #f5f5f5;
}

// 搜索头部
.search-header {
	padding: 10rpx 30rpx 20rpx;
	padding-top: calc(var(--status-bar-height) + 20rpx);
	position: sticky;
	top: 0;
	z-index: 999;

	.search-box {
		display: flex;
		align-items: center;
		height: 72rpx;

		.search-input-wrapper {
			flex: 1;
			margin: 0 20rpx;
		}

		.search-text {
			color: #666;
			font-size: 28rpx;
			padding: 8rpx 16rpx;
		}
	}
}

// 分类标签
.category-tabs {
	padding: 0 30upx;
	display: flex;

	.tab-item {
		padding: 8upx 26upx;
		font-size: 24upx;
		text-align: center;
		position: relative;
		border-radius: 8upx;
		background: #fff;
		margin-right: 20upx;

		&.active {
			.tab-text {
				color: #333;
				font-weight: 500;
			}
		}

		.tab-text {
			color: #999;
			font-weight: 400;
		}
	}
}

.container-box {
	margin-top: 30upx;
	padding: 0 30upx;

	.account-box {
		background: #fff;
		border-radius: 20upx;
		margin: 12upx 0;
		overflow: hidden;

		// 月度统计
		.monthly-summary {
			background: linear-gradient(to top, #e8f3fb, #fff);
			padding: 30upx;

			.month-title {
				display: flex;
				align-items: flex-end;
				gap: 4upx;
				margin-bottom: 24upx;

				.month-number {
					font-size: 72upx;
					color: #333;
					line-height: 0.85;
				}

				.month-text {
					font-size: 28upx;
					color: #333;
					font-weight: 400;
				}
			}

			.summary-data {
				display: flex;
				margin-bottom: 24upx;
				gap: 160upx;

				.summary-item {
					.summary-label {
						display: block;
						font-size: 24upx;
						color: #999;
						margin-bottom: 6upx;
						font-weight: 400;
					}

					.summary-amount {
						font-size: 30upx;
						color: #333;
						font-weight: 400;

						.summary-amount-text {
							font-size: 24upx;
							color: #333;
							font-weight: 400;
							margin-right: 4upx;
						}
					}
				}
			}

			.budget-setting {
				.budget-text {
					font-size: 26upx;
					color: #333;
					font-weight: 400;
				}
			}
		}

		// 交易记录列表
		.transaction-list {
			background: #fff;

			.transaction-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 24upx 20upx;
				border-bottom: 1upx solid #f8f8f8;

				&:last-child {
					border-bottom: none;
				}

				.transaction-left {
					display: flex;
					align-items: center;
					gap: 20upx;
					flex: 1;

					.transaction-icon {
						width: 72upx;
						height: 72upx;
						background: #f5f5f5;
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;

						.icon-text {
							font-size: 28upx;
						}
					}

					.transaction-info {
						flex: 1;

						.transaction-title {
							display: block;
							font-size: 28upx;
							color: #333;
							margin-bottom: 6upx;
							font-weight: 400;
							line-height: 1.3;
						}

						.transaction-category {
							display: block;
							font-size: 22upx;
							color: #999;
							margin-bottom: 4upx;
							font-weight: 400;
						}

						.transaction-time {
							display: block;
							font-size: 22upx;
							color: #999;
							font-weight: 400;
						}
					}
				}

				.transaction-right {
					text-align: right;

					.transaction-amount {
						display: block;
						font-size: 28upx;
						color: #333;
						font-weight: 400;
						margin-bottom: 6upx;
					}

					.transaction-status {
						display: block;
						font-size: 22upx;
						color: #999;
						font-weight: 400;
					}
				}
			}
		}

		// 加载更多
		.load-more {
			padding: 36upx;
			text-align: center;

			.load-text {
				font-size: 26upx;
				color: #999;
				font-weight: 400;
			}
		}
	}
}
</style>